Angular 响应式表单 基础例子

1、案例需求

表单提交，表单全部校验成功才能提交，当表单校验错误，表单边框变红，同时有错误提示信息，有重置功能

2、代码分析

• 在线预览
• git仓库

本案例中使用了响应式表单，响应式表单在表单的校验方面非常方便

2.1、注册 ReactiveFormsModule

要使用响应式表单，就要从 @angular/forms 包中导入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 数组中。

app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ]

2.2、使用 FormBuilder 来生成表单控件

当需要与多个表单打交道时，手动创建多个表单控件实例会非常繁琐。FormBuilder 服务提供了一些便捷方法来生成表单控件。FormBuilder 在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。

• 注入 FormBuilder 服务

constructor(
    private fb: FormBuilder
  ) { }

• 生成表单控件

FormBuilder 提供了一个语法糖，以简化 FormControl、FormGroup 或 FormArray 实例的创建过程。它会减少构建复杂表单时所需的样板代码的数量（new FormControl）。

formGroup: FormGroup;

this.formGroup = this.fb.group({
      name: '',
      age: '',
      sex: ''
    });

2.3、FormGroupDirective

formGroup 是一个输入指令，它接受一个 formGroup 实例，它会使用这个 formGroup 实例去匹配 FormControl、FormGroup、FormArray 实例，所以模版中的 formControlName 必须和 formGroup 中的 name 匹配。

<form [formGroup]="formGroup" (ngSubmit)="submit()" novalidate>
  <div class="form-group">
    <label>姓名：</label>
    <input type="text"
      formControlName="name">
      <p>{{nameErrorMessage}}</p>
  </div>
</form>

2.4、表单状态

每个表单控件都有自己的状态，共五个状态属性，都是布尔值。

• valid 表单值是否有效
• pristine 表单值是否未改变
• dirty 表单值是否已改变
• touched 表单是否已被访问过
• untouched 表单是否未被访问过

以输入姓名的表单为例，只验证该表单的必填项时。表单先获取焦点并且输入姓名，最后移除焦点，每一步表单的状态如下：

初始状态
状态	值
valid	false
pristine	true
dirty	false
touched	false
untouched	true

输入状态
状态	值
valid	true
pristine	false
dirty	true
touched	false
untouched	true

失去焦点后状态
状态	值
valid	true
pristine	false
dirty	true
touched	true
untouched	true

2.5、表单校验

表单验证用于验证用户的输入，以确保其完整和正确。Angular内置的了一些校验器，如 Validators.required， Validators.maxlength，Validators.minlength， Validators.pattern，但是不能自定义错误提示信息，所以实用性不强，满足不了业务场景的需求，于是我们可以自定义表单校验器。

自定义表单校验器

name-validator.ts

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function nameValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {

    if (!control.value) {
      return { message: '请输入必选项' };
    }

    if (control.value.length > 10) {
      return { message: '名称大于10位了' };
    }

    return null;

  };
}

使用自定义验证器

app.component.ts

this.formGroup = this.fb.group({
      name: ['', nameValidator()],
      age: ['', ageValidator()],
      sex: ['', sexValidator()]
    });

显示错误提示信息

当页面初始化的时候不应该显示错误信息，也就是表单touched为true

// Error
private errorMessage(name): string {
    const control = this.formGroup.controls[name];
    return (control.touched && control.invalid) ? control.errors.message : '';
  }

然而touched只有失去焦点才为true，在输入的时候一直为false。导致在输入的时候，表单校验错误，却显示不了错误信息。因此需要再次判断 dirty 状态，只要表单值改变，则为false

private errorMessage(name): string {
    const control = this.formGroup.controls[name];
    return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : '';
  }

2.6、markAsTouched

未对表单操作时，点击提交按钮时，则模拟表单被touched，显示提示信息

markFormGroupTouched(formGroup: FormGroup) {
    (<any>Object).values(formGroup.controls).forEach(item => {
      if (item.controls) {
        this.markFormGroupTouched(item);
      } else {
        item.markAsTouched();
      }
    });
  }